<template>
  <div class="music-container">
    <el-row>
      <el-col :span="10">
        <el-card>
          <el-input v-model="name" style="width:300px;"></el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-card>
        <el-card>
          <aplayer
            v-loading="loading"
            :music="{
            title: 'secret base~君がくれたもの~',
            artist: 'Silent Siren',
            src: 'http://sc1.111ttt.cn:8282/2018/1/03m/13/396131232171.m4a?tflag=1519095601&pin=6cd414115fdb9a950d827487b16b5f97#.mp3',
            pic: '',
            lrc:'11111',
        }"
            :list="list"
            :mini="false"
            :float="true"
            :showLrc="true"
          />
        </el-card>
      </el-col>
      <el-col :span="13" style="margin-left:20px;">
        <el-card class="music-container">
          <div id="wrapper">
            <div id="fileWrapper" class="file_wrapper">
              <div id="info" style=" font-size:14px;">
                如果上传文件不能播放请
                谷歌浏览器请在地址栏输入chrome://flags/#autoplay-policy 搜索autoplay policy 选择NO user getsture is required 即可
                <input type="file" id="uploadedFile"/>
              </div>
            </div>
            <div id="visualizer_wrapper">
              <canvas id="canvas" width="600" height="350" ></canvas>
              <!-- <div class="btn-box">
                <el-button size="mini" type="primary" @click="handleClickStop">暂停</el-button>
                <el-button size="mini" type="primary">播放</el-button>
              </div> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Aplayer from "vue-aplayer";
import axios from "axios";
import { list } from "./mock";
import {initPlayer,StopPlayer} from './mian'
export default {
  components: {
    Aplayer
  },
  data() {
    return {
      list,
      name: "",
      loading: false,
      player:null
    };
  },
  mounted() {
    initPlayer()
  },
  methods: {
    handleSearch() {
      this.loading = true;
      axios
        .get(`https://api.apiopen.top/searchMusic?name=${this.name}`)
        .then(res => {
          this.loading = false;
          if ((res.data.code = 200)) {
            this.list = res.data.result;
          }
        });
    },
    handleClickStop(){
     
    }
  }
};
</script>


<style lang="scss" scoped>
.music-container {
  padding: 25px;
  .music-container {
    height: 520px;
    #visualizer_wrapper{
      display: flex;
      flex-direction: row;
      .btn-box{
        padding-top:350px;
      }
    }
  }
}
</style>

